<template>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      :showCancel="true"
      @close="dialogConfig.show = false"
      width="800px"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="180px"
        @submit.prevent
      >
      <el-form-item label="是否开启提醒" prop="isActive">
        <el-radio-group v-model="formData.isActive">
            <el-radio :value="1" size="large">是</el-radio>
            <el-radio :value="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="formData.isActive==1">
        <el-form-item label="提前提醒天数" prop="reminderDaysBefore">
          <el-input  v-model="formData.reminderDaysBefore" />
        </el-form-item>

        <el-form-item label="通知渠道" prop="notificationChannel">
            <el-radio-group v-model="formData.notificationChannel">
            <el-radio value="0" size="large">全部</el-radio>
            <el-radio value="1" size="large">邮箱</el-radio>
            <el-radio value="2" size="large">站内</el-radio>
        </el-radio-group>
        </el-form-item>

        <el-form-item label="更新日期" prop="updated_at">
          <el-input  disabled v-model="formData.updatedAt" />
        </el-form-item>
      </template>


      </el-form>
    </Dialog>
  </template>

  <script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
  const { proxy } = getCurrentInstance();

  const api = {
    saveReminderSetting: "/reminderSetting/saveReminderSetting",
    getByLoanBudgetId: "/reminderSetting/getByLoanBudgetId",
  };




  const dialogConfig = ref({
    show: false,
    title: "新增账单信息",
    buttons: [
      {
        type: "primary",
        text: "确定",
        click: (e) => {
          submitForm();
        },
      },
    ],
  });

  const formData = ref({
    isActive:0,
  });
  const formDataRef = ref();


  const props=defineProps({
    type:{
        type:Number
    }
  })

  const rules = {
    notificationChannel: [{ required: true, message: "请选择通知类型" },
    ],
    reminderDaysBefore: [{ required: true, message: "请输入提前提醒天数" },
    {
        validator: proxy.Verify.number,
        message: "请输入整数",
      },
    ],

    isActive: [{ required: true, message: "请选择是否开启提醒设置" }],
  };

  const show = (data) => {
    dialogConfig.value.show = true;
    formData.value={
        isActive:0,
    };
    nextTick(() => {
      formDataRef.value.resetFields();
      dialogConfig.value.title = "提醒设置";
      formData.value.loanBudgetId=data.id;
      loadReminderSetting(data.id);
    });
  };

  defineExpose({
    show,
  });

  const loadReminderSetting= async(loanBudgetId)=>{

    let result = await proxy.Request({
        url: "/reminderSetting/getByLoanBudgetId",
        params:{
            loanBudgetId:loanBudgetId,
            type:props.type
        }
      });
      if (!result) {
        return;
      }
      if(result.data!==null){
        Object.assign(formData.value,result.data);
      }else{
        formData.value.isActive=0;
      }
    }


  const emit = defineEmits(["reload"]);
  const submitForm =  () => {
    formDataRef.value.validate(async (valid) => {
      if (!valid) {
        return;
      }

      let params = {};
      Object.assign(params, formData.value);
      params.type=props.type;
      let result = await proxy.Request({
        url: api.saveReminderSetting,
        params,
      });
      if (!result) {
        return;
      }

      dialogConfig.value.show = false;
      proxy.Message.success("保存成功");
      emit("reload");
    });
  };
  </script>

  <style lang="scss" scoped>
  .check-span-item {
    float: left;
    margin-right: 10px;
    line-height: 20px;
  }
  </style>
